<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="${ctx}/static/css/font.css">
    <link rel="stylesheet" href="${ctx}/static/css/xadmin.css">
    <script src="${ctx}/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${ctx}/static/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input"></div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body ">
                    <%--数据展示--%>
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<%--修改的弹出层页面--%>
<div id="editForm" style="display: none">
    <form class="layui-form" style="margin-top: 10px">
        <input type="hidden" name="id" id="L_id">
        <div class="layui-input-inline">
            <label for="L_name" class="layui-form-label">
                <span class="x-red">*</span>姓名</label>
            <div class="layui-input-inline">
                <input type="text" id="L_name" name="name" required="" lay-verify="name" placeholder="请输入姓名"
                       autocomplete="off"
                       class="layui-input">
            </div>

        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">
                <span class="x-red">*</span>性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男">
                <input type="radio" name="gender" value="女" title="女">
                <input type="radio" name="gender" value="禁" title="禁用">
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_birthday" class="layui-form-label">
                <span class="x-red">*</span>出生日期</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" autocomplete="off" placeholder="请输入出生日期" name="birthday" id="L_birthday">
            </div>

        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">
                <span class="x-red">*</span>政治面貌</label>
            <div class="layui-input-block">
                <select name="politicsstatusid" lay-filter="politicsstatusid">
                    <option value="">请选择政治面貌</option>
                    <option value="1">中共党员</option>
                    <option value="2">中共预备党员</option>
                    <option value="3">共青团员</option>
                    <option value="4">民革党员</option>
                    <option value="5">民盟盟员</option>
                    <option value="6">民建会员</option>
                    <option value="7">民进会员</option>
                    <option value="8">农工党党员</option>
                    <option value="9">致公党党员</option>
                    <option value="10">九三学社社员</option>
                    <option value="11">台盟盟员</option>
                    <option value="12">无党派民主人士</option>
                    <option value="13">普通公民</option>
                </select>
            </div>

        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">
                <span class="x-red">*</span>民族</label>
            <div class="layui-input-block">
                <select name="nationid" lay-filter="nationid">
                    <option value="">--请选择民族--</option>
                    <option value="1">汉族</option>
                    <option value="2">蒙古族</option>
                    <option value="3">回族</option>
                    <option value="4">藏族</option>
                    <option value="5">维吾尔族</option>
                    <option value="6">苗族</option>
                    <option value="7">彝族</option>
                    <option value="8">壮族</option>
                    <option value="9">布依族</option>
                    <option value="10">朝鲜族</option>
                    <option value="11">满族</option>
                    <option value="12">侗族</option>
                    <option value="13">瑶族</option>
                    <option value="14">白族</option>
                    <option value="15">土家族</option>
                    <option value="16">哈尼族</option>
                    <option value="17">哈萨克族</option>
                    <option value="18">傣族</option>
                    <option value="19">黎族</option>
                    <option value="20">傈僳族</option>
                    <option value="21">佤族</option>
                    <option value="22">畲族</option>
                    <option value="23">高山族</option>
                    <option value="24">拉祜族</option>
                    <option value="25">水族</option>
                    <option value="26">东乡族</option>
                    <option value="27">纳西族</option>
                    <option value="28">景颇族</option>
                    <option value="29">柯尔克孜族</option>
                    <option value="30">土族</option>
                    <option value="31">达斡尔族</option>
                    <option value="32">仫佬族</option>
                    <option value="33">羌族</option>
                    <option value="34">布朗族</option>
                    <option value="35">撒拉族</option>
                    <option value="36">毛难族</option>
                    <option value="37">仡佬族</option>
                    <option value="38">锡伯族</option>
                    <option value="39">阿昌族</option>
                    <option value="40">普米族</option>
                    <option value="41">塔吉克族</option>
                    <option value="42">怒族</option>
                    <option value="43">乌孜别克族</option>
                    <option value="44">俄罗斯族</option>
                    <option value="45">鄂温克族</option>
                    <option value="46">崩龙族</option>
                    <option value="47">保安族</option>
                    <option value="48">裕固族</option>
                    <option value="49">京族</option>
                    <option value="50">塔塔尔族</option>
                    <option value="51">独龙族</option>
                    <option value="52">鄂伦春族</option>
                    <option value="53">赫哲族</option>
                    <option value="54">门巴族</option>
                    <option value="55">珞巴族</option>
                    <option value="56">基诺族</option>
                </select>
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_nativeplace" class="layui-form-label">
                <span class="x-red">*</span>籍贯</label>
            <div class="layui-input-inline">
                <input type="text" id="L_nativeplace" name="nativeplace" required="" lay-verify="nativeplace"
                       placeholder="请输入籍贯"
                       autocomplete="off"
                       class="layui-input">
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_email" class="layui-form-label">
                <span class="x-red">*</span>电子邮箱</label>
            <div class="layui-input-inline">
                <input type="text" id="L_email" name="email" required="" lay-verify="email" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_address" class="layui-form-label">
                <span class="x-red">*</span>联系地址</label>
            <div class="layui-input-inline">
                <input type="text" id="L_address" name="address" required="" lay-verify="address" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_positionid" class="layui-form-label">
                <span class="x-red">*</span>职位</label>
            <div class="layui-input-block">
                <select name="positionid" lay-filter="positionid" id="L_positionid">
                    <option value="">选择职位</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <label for="L_jobtitle" class="layui-form-label">
                <span class="x-red">*</span>职称</label>
            <div class="layui-input-block">
                <select name="jobtitleid" lay-filter="jobtitleid" id="L_jobtitle">
                    <option value="">选择职称</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">
                <span class="x-red">*</span>所属部门</label>
            <div class="layui-input-block">
                <select name="departmentid" lay-filter="politicsstatusid" id="departmentid">
                    <option value="">请选择部门</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <label for="L_phone" class="layui-form-label">
                <span class="x-red">*</span>电话号码</label>
            <div class="layui-input-inline">
                <input type="text" id="L_phone" name="phone" required="" lay-verify="phone" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_workid" class="layui-form-label">
                <span class="x-red">*</span>工号</label>
            <div class="layui-input-inline">
                <input type="text" id="L_workid" name="workid" required="" lay-verify="workid" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_school" class="layui-form-label">
                <span class="x-red">*</span>毕业院校</label>
            <div class="layui-input-inline">
                <input type="text" id="L_school" name="school" required="" lay-verify="school" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_tiptopdegree" class="layui-form-label">
                <span class="x-red">*</span>最高学历</label>
            <div class="layui-input-inline">
                <input type="text" id="L_tiptopdegree" name="tiptopdegree" required="" lay-verify="tiptopdegree"
                       autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_specialty" class="layui-form-label">
                <span class="x-red">*</span>专业名称</label>
            <div class="layui-input-inline">
                <input type="text" id="L_specialty" name="specialty" required="" lay-verify="specialty"
                       autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label for="L_begindate" class="layui-form-label">
                <span class="x-red">*</span>入职日期</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" autocomplete="off" placeholder="请输入出生日期" name="begindate" id="L_begindate">
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_conversiontime" class="layui-form-label">
                <span class="x-red">*</span>转正日期</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" autocomplete="off" placeholder="请输入转正日期" name="conversiontime"
                       id="L_conversiontime">
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_begincontract" class="layui-form-label">
                <span class="x-red">*</span>合同开始日期</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" autocomplete="off" placeholder="请输入合同开始日期" name="begincontract"
                       id="L_begincontract">
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_endcontract" class="layui-form-label">
                <span class="x-red">*</span>合同终止日期</label>
            <div class="layui-inline layui-show-xs-block">
                <input class="layui-input" autocomplete="off" placeholder="请输入出生日期" name="endcontract"
                       id="L_endcontract">
            </div>

        </div>
        <div class="layui-input-inline">
            <label for="L_idcard" class="layui-form-label">
                <span class="x-red">*</span>身份证号码</label>
            <div class="layui-input-inline">
                <input type="text" id="L_idcard" name="idcard" required="" lay-verify="idcard" autocomplete="off"
                       class="layui-input"></div>
        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">
                <span class="x-red">*</span>聘用形式</label>
            <div class="layui-input-block">
                <input type="radio" name="engageform" value="劳动合同" title="劳动合同" checked="">
                <input type="radio" name="engageform" value="劳务合同" title="劳务合同">
            </div>

        </div>
        <div class="layui-input-inline">
            <label class="layui-form-label">
                <span class="x-red">*</span>婚姻状态</label>
            <div class="layui-input-block">
                <input type="radio" name="wedlock" value="未婚" title="未婚">
                <input type="radio" name="wedlock" value="已婚" title="已婚">
                <input type="radio" name="wedlock" value="已婚" title="已婚">
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="position: absolute;right: 50px;margin-top: 20px">
                <button type="submit" class="layui-btn layui-btn-normal" lay-filter="editEmployee" lay-submit=""><i
                        class="layui-icon layui-icon-edit"></i>编辑
                </button>
                <button class="layui-btn layui-btn-danger" lay-filter="cancle"><i
                        class="layui-icon layui-icon-close"></i>取消
                </button>
                <button type="reset" class="layui-btn layui-btn-primary"><i
                        class="layui-icon layui-icon-refresh"></i>重置
                </button>
            </div>
        </div>
    </form>
</div>


<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData"> 获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll"> 验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['laydate', 'table', 'form'], function () {
        var laydate = layui.laydate;
        var table = layui.table;
        var form = layui.form;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        laydate.render({
            elem: '#L_birthday' //指定元素
        });
        laydate.render({
            elem: '#L_endcontract' //指定元素
        });
        laydate.render({
            elem: '#L_begincontract' //指定元素
        });
        laydate.render({
            elem: '#L_conversiontime' //指定元素
        });
        laydate.render({
            elem: '#L_begindate' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
        var index = layer.load(2);
        /*数据渲染*/
        table.render({
            elem: '#test'
            , url: '${ctx}/employee?action=queryByPage'/*tpa=https://www.layuiweb.com/test/table/demo1.json*/
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '员工数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left', width: 30, align: "center"}
                , {field: 'id', title: 'ID', hide: true}
                , {field: 'name', title: '用户名', width: 80, edit: 'text'}
                , {field: 'workId', title: '工号', width: 100, edit: 'text'}
                , {
                    field: 'email', title: '邮箱', width: 150, edit: 'text', templet: function (res) {
                        return '<em>' + res.email + '</em>'
                    }
                }
                , {field: 'gender', title: '性别', width: 60, edit: 'text', sort: true}
                , {field: 'address', title: '地址', width: 150}
                , {
                    field: 'birthday', title: '出生日期', width: 180
                }
                , {field: 'idCard', title: '身份证号码', width: 180, sort: true}
                , {field: 'wedlock', title: '婚姻状况', width: 60}
                , {field: 'nationname', title: '民族', width: 100}
                , {field: 'nativePlace', title: '籍贯', width: 150, sort: true}
                , {field: 'politicname', title: '政治面貌', width: 120}
                , {field: 'phone', title: '手机号码', width: 120}
                , {field: 'school', title: '毕业院校', width: 120}
                , {field: 'specialty', title: '专业', width: 120}
                , {field: 'tiptopDegree', title: '最高学历', width: 120}
                , {field: 'deptname', title: '所属部门', width: 120}
                , {field: 'positionname', title: '职位', width: 120}
                , {field: 'jobname', title: '职称', width: 120}
                , {field: 'beginDate', title: '入职日期', width: 180}
                , {field: 'notWorkDate', title: '离职日期', width: 180}
                , {field: 'beginContract', title: '合同起止日期', width: 180}
                , {field: 'endContract', title: '合同终止日期', width: 180}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true,
            done: function () {
                //关闭加载窗
                layer.close(index)
            }
        });


        //监听单元格编辑
        table.on('edit(test)',
            function (obj) {
                var value = obj.value //得到修改后的值
                    ,
                    data = obj.data //得到所在行所有键值
                    ,
                    field = obj.field; //得到字段
                layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
            });

        //头工具栏事件
        table.on('toolbar(test)',
            function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了：' + data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
                ;
            });
        let updateIndex;
        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除<span style="color:red">[' + data.name + ']</span>这个数据吗?', function (index) {
                    // 发送ajax请求删除数据
                    $.post("${ctx}/employee?action=deleteById", {id: data.id}, function (result) {
                        if (result.code == 2008) {
                            layer.msg(result.message, {icon: 6, time: 1000}, function () {
                                //重新渲染
                                table.reload("test");
                                //关闭弹窗
                                layer.close(index);
                            })
                        }
                    })

                });
            } else if (obj.event === 'edit') {
                //弹出页面
                updateIndex = layer.open({
                    title: "修改员工信息",
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['1000px', '450px'], //宽高
                    content: $("#editForm"),
                    success: function (layero, index) {
                        // 进行数据回填
                        $("#L_id").val(data.id);
                        $("#L_name").val(data.name);
                        // 回填性别
                        if (data.gender === "男") {
                            console.log(data.gender)
                            console.log($("input[name=gender][value=男]")[0])
                            $("input[name='gender'][value='男']").prop("checked", true);
                            $("input[name='gender'][value='女']").prop("checked", false);

                        } else {
                            $("input[name='gender'][value='男']").prop("checked", false);
                            $("input[name='gender'][value='女']").prop("checked", true);
                        }
                        //民族渲染
                        $("dd:contains(" + data.nationname + ")").click()
                        //政治面貌
                        $("dd:contains(" + data.politicname + ")").click()
                        //回填籍贯
                        $("#L_nativeplace").val(data.nativeplace)
                        //回填初始日期
                        $("#L_birthday").val(data.birthday)
                        //回填学校
                        $("#L_school").val(data.school)
                        $("#L_address").val(data.address);
                        $("#L_specialty").val(data.specialty)
                        $("#L_tiptopdegree").val(data.tiptopDegree)
                        $("#L_begindate").val(data.beginDate)
                        $("#L_conversiontime").val(data.conversionTime)
                        $("#L_workid").val(data.workId)
                        // 部门的数据回填
                        $.ajax({
                            url: '${ctx}/department?action=queryAll',
                            data: {name: data.deptname},
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 2002) {
                                    $.each(res.data.list, function (index, item) {
                                        $("#departmentid").append("<option value=\"" + item.id + "\">" + item.name + "</option>");
                                        $("#departmentid").val(res.data.department.id);
                                    })
                                    //重新渲染
                                    form.render("select");
                                } else {
                                    layer.msg(res.message);
                                }
                            }
                        });
                        //职称数据回填
                        $.ajax({
                            url: '${ctx}/jobtitle?action=queryAll',
                            data: {name: data.jobname},
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 2002) {
                                    $.each(res.data.list, function (index, item) {
                                        $("#L_jobtitle").append("<option value=\"" + item.id + "\">" + item.name + "</option>");
                                        $("#L_jobtitle").val(res.data.jobtitle.id);
                                    })
                                    //重新渲染
                                    form.render("select");
                                } else {
                                    layer.msg(res.message);
                                }
                            }
                        });
                        //职位数据回填
                        $.ajax({
                            url: '${ctx}/position?action=queryAll',
                            data: {name: data.positionname},
                            dataType: "json",
                            success: function (res) {
                                if (res.code == 2002) {
                                    $.each(res.data.list, function (index, item) {
                                        $("#L_positionid").append("<option value=\"" + item.id + "\">" + item.name + "</option>");
                                        $("#L_positionid").val(res.data.position.id);
                                    })
                                    //重新渲染
                                    form.render("select");
                                } else {
                                    layer.msg(res.message);
                                }
                            }
                        });

                        $("#L_email").val(data.email)
                        $("#L_phone").val(data.phone)
                        $("#L_nativeplace").val(data.nativePlace)
                        $("#L_idcard").val(data.idCard)
                        $("#L_begincontract").val(data.beginContract)
                        $("#L_endcontract").val(data.endContract)

                        if (data.engageForm === "劳动合同") {
                            $("input[name='engageform'][value='劳动合同']").prop("checked", true);
                            $("input[name='engageForm'][value='劳务合同']").prop("checked", false);

                        } else {
                            $("input[name='engageform'][value='劳动合同']").prop("checked", false);
                            $("input[name='engageform'][value='劳务合同']").prop("checked", true);
                        }
                        switch (data.wedlock) {
                            case "未婚":
                                $("input[name='wedlock'][value='未婚']").prop("checked", true);
                                $("input[name='wedlock'][value='已婚']").prop("checked", false);
                                $("input[name='wedlock'][value='离异']").prop("checked", false);
                                break;
                            case "已婚":
                                $("input[name='wedlock'][value='未婚']").prop("checked", false);
                                $("input[name='wedlock'][value='已婚']").prop("checked", true);
                                $("input[name='wedlock'][value='离异']").prop("checked", false);
                                break;
                            case "离异":
                                $("input[name='wedlock'][value='未婚']").prop("checked", false);
                                $("input[name='wedlock'][value='已婚']").prop("checked", false);
                                $("input[name='wedlock'][value='离异']").prop("checked", true);
                                break;

                        }
                        //表单重新渲染
                        form.render();
                    }
                });
            }
        });
        //修改员工数据
        form.on('submit(editEmployee)', function (data) {
            $.post("${ctx}/employee?action=doUpdateEmployee", data.field, function (result) {
                if (result.code === 2004) {
                    layer.msg(result.message, {icon: 6, time: 1000}, function () {
                        layer.close(updateIndex);
                        table.reload("test");
                    });
                } else {
                    layer.msg(result.message, {icon: 5, time: 1000})
                }
            })
            return false;
        });
    });
</script>
</html>
